<template>
	<view class="settle">
		<view class="bg">
			<view class="money">
				欠款余额:
			</view>
			<view class="money" style="text-align: right;margin-bottom: 10px;">
				￥{{momenyFormat(entity.ArrearsMoney)}}
			</view>
			<view class="radio">
				<radio-group @change="radioChange" class="flex">
					<view class="" style="display: flex;flex-direction: column;align-items: center;"  v-for="item in payList">
						<image style="width: 80rpx;height: 80rpx;" :src="item.url"></image>
					    <view style="">
					    	<radio style="transform: scale(0.8);margin-top: 10rpx;" :value="item.value" :checked="payValue == item.value" />{{item.key}}
					    </view>
					</view>
					
				</radio-group>
			</view>
			<view class="payInput">
				<input v-model="payMoney" class="input" type="number" placeholder="收款金额" @input="payInput">
			</view>
			<button type="primary" @click="submit">收款</button>
		</view>
	</view>
</template>

<script>
	import {
		momenyFormat
	} from '@/util/util.js'
	export default {
		data() {
			return {
				payValue: '0',
				payMoney: '',
				payList: [{
					key: '转账',
					value: '0',
					url: '/static/zhuanzhang.png',
				}, {
					key: '微信',
					value: '1',
					url: '/static/weixin.png',
				}, {
					key: '支付宝',
					value: '2',
					url: '/static/zhifubao.png',
				}, {
					key: '现金',
					value: '3',
					url: '/static/xianjin.png',
				}],
				entity: {}
			}
		},
		onLoad(query) {
			console.log(query);
			this.entity = JSON.parse(query.data)
			this.payMoney = this.entity.ArrearsMoney
		},
		methods: {
			payInput(e) {
				console.log();
				if (e.detail.value > this.entity.ArrearsMoney) {
					setTimeout(() => {
						this.payMoney = this.entity.ArrearsMoney
					}, 10)
					this.$api.msg('收款金额不能大于欠款余额')
				} else if (e.detail.value < 0) {
					setTimeout(() => {
						this.payMoney = this.entity.ArrearsMoney
					}, 10)
					this.$api.msg('请输入正确的收款金额')
				}
			},
			radioChange(e) {
				this.payValue = e.detail.value
			},
			submit() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				console.log('获取上个页面上护具', prevPage)
				
				if (!this.payMoney || this.payMoney == 0) return this.$api.msg('请输入收款金额')
				uni.showLoading()
				this.$http('post', '/BO/BIlling/AddBIllcollection', {
					"CompanyId": this.entity.CompanyId,
					"CompanyName": uni.getStorageSync('CompanyInfo').Title,
					"CustomerId": this.entity.CustomerId,
					"CustomerName": this.entity.CustomerName,
					"Money": this.payMoney,
					"Type": 0,
					"PayType": this.payValue
				}).then(res => {
					uni.hideLoading()
					if (!res.Success) return this.$api.msg(res.Msg)
					this.$api.msg('收款成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.settle {
		padding: 10px;
		height: 100%;
		width: 100%;
		background-image: url('/static/background.png');
		background-size: cover;
		box-sizing: border-box;
		overflow-y: scroll;

		.bg {
			background-color: rgba(255, 255, 255, .8);
			border-radius: 20rpx;
			padding: 40rpx 20rpx;
			margin-top: 200rpx;
		}

		.money {
			font-weight: bold;
			font-size: 40rpx;

			text {
				float: right;
			}
		}

		.radio {
			margin: 40px 0;

			.flex {
				display: flex;
				justify-content: space-between;
			}
		}

		.payInput {
			background-color: #fff;
			margin-bottom: 40px;

			.input {
				border: 1px solid #ccc;
				border-radius: 10rpx;
				height: 50px;
				line-height: 50px;
				font-size: 22px;
				text-align: right;
				box-sizing: border-box;
				padding: 0 20rpx;
			}
		}
	}
</style>